<script setup lang="ts">
//不设置默认值
// const  props=defineProps<{
// name :string ,
// age ?:number ,
// male :boolean 
// }>()

//设置默认值  可以用可选链解决报错
const  props=withDefaults(defineProps<{
 name? :string ,
 age ?:number ,
 male ?:boolean 
}>(),{name:'rose',age:18,male:false})

//在script里面使用需要使用.语法
console.log(props.age);


</script>
<template>
    <div><h2>我是子组件</h2>
        <!-- 
            在页面使用可以直接使用
         -->
    <p>{{ name }}</p>
    <p>{{ age }}</p>
    <p>{{male  }}</p>
    </div>
   

</template>
<style scoped>
div{
    height:200px;
    width: 200px;
    background-color: skyblue;
}
</style>